import React from 'react';
import { MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { Button, Form, Input, notification } from 'antd';

export default function PhoneLogin(props) {
  const { getPhoneForm } = props;
  const [form] = Form.useForm();
  const onValuesChange = () => {
    // console.log(form.getFieldValue());
    if (form.getFieldValue().verificationCode === code) {
      getPhoneForm({ ...form.getFieldValue(), verificationCode: true });
    }
  };
  // 验证码 通知框
  const [api, contextHolder] = notification.useNotification();
  const code = parseInt(Math.random() * (9999 - 1000 + 1) + 1000);
  const sendCode = () => {
    api.success({
      message: '验证码',
      description: code,
      placement: 'top',
    });
  };
  const phoneValidator = (rules, val) => {
    // console.log(rules, val);
    if (!val.trim()) {
      return Promise.reject('手机号不能为空');
    } else if (!rules.rule.test(val.trim())) {
      return Promise.reject('请输入正确的手机号');
    } else {
      return Promise.resolve();
    }
  };
  return (
    <Form form={form} name='phone_login' className='login-form' onValuesChange={onValuesChange} size='large'>
      {contextHolder}
      <Form.Item
        name='phone'
        hasFeedback
        rules={[
          {
            rule: /^[13|16|17|18|19]\d{10}$/,
            validator: phoneValidator,
          },
        ]}>
        <Input prefix={<PhoneOutlined className='site-form-item-icon' />} placeholder='手机号' />
      </Form.Item>
      <Form.Item style={{ width: '70%' }} name='verificationCode'>
        <Input prefix={<MailOutlined className='site-form-item-icon' />} type='text' placeholder='验证码' />
      </Form.Item>
      <Form.Item style={{ position: 'absolute', top: 65, right: 0 }}>
        <Button type='default button' onClick={sendCode}>
          获取验证码
        </Button>
      </Form.Item>
    </Form>
  );
}
